<template>
  <div class="pie">
    <img :src="img" class="circle" />
    <div class="dot" :style="{ background: color, top, left }"></div>
    <div
      class="sector"
      :class="[animation]"
      ref="sectorRef"
      :style="{ background: color, transform }"
    ></div>
  </div>
</template>

<script setup>
import { defineProps, watch, ref, nextTick, computed } from "vue";
import pieCircle1 from "../assets/image/pie_circle_1.png";
import pieCircle2 from "../assets/image/pie_circle_2.png";
import pieCircle3 from "../assets/image/pie_circle_3.png";
import pieCircle4 from "../assets/image/pie_circle_4.png";

const props = defineProps({
  data: {
    type: Number,
    default: 20,
  },
  color: {
    type: String,
    default: "blue",
  },
});

let pauseTime = 0;
const sectorRef = ref(null);
const animation = ref("");

watch(
  () => props.data,
  () => {
    nextTick(() => {
      animation.value = "";
      setTimeout(() => {
        animation.value = "sector-animation";
        pauseTime = (props.data / 100) * 4;
        setTimeout(() => {
          sectorRef.value.style.animationPlayState = "paused";
        }, pauseTime * 1000);
      }, 50);
    });
  },
  { immediate: true }
);

const colorOptions = ref({
  blue: {
    img: pieCircle1,
    color: "rgb(43, 116, 255)",
    top: "-5%",
    left: "45.4%",
    transform: "translate(-50%, -50%) rotate(50deg)",
  },
  blue2: {
    img: pieCircle2,
    color: "rgb(1, 166, 252)",
    top: "18%",
    left: "3%",
    transform: "translate(-50%, -50%) rotate(-14deg)",
  },
  yellow: {
    img: pieCircle3,
    color: "rgb(255, 182, 66)",
    top: "20%",
    left: "88%",
    transform: "translate(-50%, -50%) rotate(105deg)",
  },
  red: {
    img: pieCircle4,
    color: "rgb(255, 101, 96)",
    top: "4%",
    left: "70%",
    transform: "translate(-50%, -50%) rotate(75deg)",
  },
});

const color = computed(() => colorOptions.value[props.color].color);
const img = computed(() => colorOptions.value[props.color].img);
const top = computed(() => colorOptions.value[props.color].top);
const left = computed(() => colorOptions.value[props.color].left);
const transform = computed(() => colorOptions.value[props.color].transform);
</script>
<style scoped lang="scss">
.pie {
  width: 100%;
  height: 100%;
  position: relative;
  .circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .dot {
    position: absolute;
    height: 10%;
    width: 10%;
    border-radius: 50%;
    opacity: 0.5;
  }
  .sector {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    // background: rgb(43, 116, 255);
    clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .sector-animation {
    animation: rotating 4s linear both infinite;
  }
  @keyframes rotating {
    0% {
      clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
    }
    25% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
    }

    25.000001% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
    }
    50% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
    }

    50.000001% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
    }
    75% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    75.000001% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
    }
    100% {
      clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }
  }
}
</style>
